<template>
  <div>
    <div style="height: 45px;line-height: 45px;">
      <el-button size="mini" style="margin-left: 10px;" type="primary" @click="saveorupdate()">新增{{ group.dictname }}
      </el-button>
    </div>
    <el-row style="height: 100%;">
      <el-col :span="4" style="height: 100%;">
        <div class="treecontainer">
          <el-tree :data="data" :load="loadNode" :props="defaultProps" class="tree" lazy
                   @node-click="handleNodeClick"></el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <el-table :data="tableData" border style="width: 100%;margin-left: 10px;border-radius: 5px;">
          <el-table-column align="center" header-align="center" label="序号" type="index" width="80">
          </el-table-column>
          <el-table-column header-align="center" label="编码" prop="dictcode" width="220">
          </el-table-column>
          <el-table-column header-align="center" label="名称" prop="dictname" width="220">
          </el-table-column>
          <el-table-column align="center" header-align="center" label="排序" prop="sorts" width="100">
          </el-table-column>
          <el-table-column header-align="center" label="说明" prop="note">
          </el-table-column>
          <el-table-column align="center" header-align="center" label="操作" width="120">
            <template v-slot="scope">
              <el-button circle icon="el-icon-edit" size="mini" title="修改" type="primary"
                         @click="saveorupdate(scope.row)">
              </el-button>
              <el-button circle icon="el-icon-delete" size="mini" title="删除" type="danger" @click="del(scope.row.id)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!--保存修改-->
    <save-or-update ref="saveupdate" :visible.sync="isshow" @refreshData="query"></save-or-update>
  </div>
</template>

<script>
const SaveOrUpdate = () => import('./SaveOrUpdate.vue')
export default {
  data() {
    return {
      tableData: [],
      data: [],
      defaultProps: {
        children: 'children',
        label: 'dictname',
        isLeaf: 'isLeaf'
      },
      isshow: false,
      user: {},
      currentDict: {}
    };
  },
  components: {
    SaveOrUpdate
  },
  props: {
    group: {
      type: Object,
      required: true,
      default: function () {
        return {
          id: "",
          dictname: "",
          dictcode: ""
        }
      }
    }
  },
  created() {
    this.user = this.$session.getUser();
    this.initData();
  },
  methods: {

    //删除
    del(id) {
      this.$confirm('您确认要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deleteDict({
          id
        })
          .then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.query()
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
      }).catch(() => {});
    },
    query() {
      this.queryBypid();
      this.initData();
    },

    initData() {
      let params = {
        "parentid": this.group.id,
        "euid": this.user.euid,
        "dictcode": this.currentDict.dictcode
      };
      this.$api.queryChildDict(params)
        .then(res => {
          if (res.code === 200) {
            this.tableData = res.data;
          }
        })
    },

    saveorupdate(data) {
      this.isshow = true;
      this.$nextTick(() => {
        this.$refs.saveupdate.init(data, this.group.id, this.group.dictname)
      })
    },
    handleNodeClick(data) {
      this.currentDict = data;
      this.initData();
    },
    queryBypid() {
      let params = {
        "pid": this.group.id
      };
      this.$api.queryDictTree(params)
        .then(res => {
          //判断接口数据是否正常
          if (res.code === 200) {
            this.data = res.data;
          }
        })
    },
    loadNode(node, resolve) {
      let pid = node.data.id || this.group.id;
      let params = {
        "pid": pid
      };
      this.$api.queryDictTree(params)
        .then(res => {
          //判断接口数据是否正常
          if (res.code === 200) {
            resolve(res.data);
          }
        })
    }
  }
};
</script>

<style scoped>
.treecontainer {
  border: #ddd solid 1px;
  border-radius: 5px;
  height: 100%;
}

.tree {
  margin: 10px;
  height: 100%;
}
</style>
